<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Michael.Lu's Demo陈列馆</title>
		<link href="demo/css/bootstrap.min.css" rel="stylesheet">
		<link rel="stylesheet" type="text/css" href="demo/css/main.css"/>
	</head>
	<body>
		<div class="container-fluid preload">
			<div class="row">
				<img src="" alt="" />
				<p>已加载 <span>0</span>%</p>
			</div>
		</div>
		<div class="container">
			<div class="jumbotron">
			  <h1>不积跬步,无以至千里</h1>
			  <p>Michael.Lu's Demo 陈列馆</p>
			</div>
			<div class="col-lg-8 col-md-8 r-padding clearPadding left">
				<a href="http://codefine.github.io/demo/content/artical/pc/taobao" target="_blank">
					<div class="panel panel-warning">
						<div class="panel-heading">
							<h4>淘宝首页 <span class="label label-warning">PC端<span></h4>
						</div>
						<div class="panel-body flex">
							<div class="col-lg-4 col-md-4 col-sm-4 clearPadding r-padding">
								<img src="demo/img/artical/taobao-pc.jpg" alt="antario" class="img-rounded">
							</div>
							<div class="col-lg-8 col-md-8 col-sm-8 hidden-xs flex-cont">
								<p class="indent">电商网站几乎是每个初学者都要仿照的网站，养花缭乱的格局中蕴藏着模块化设计的优良思想。而淘宝又是几乎所有电商网站布局最麻烦的。所以，挑战它！</p>
								<p class="indent">本例中，主要从模块化布局切入，模块从大到小，css由外而内，整站多数弹出层交互效果均用hover实现,再加入一些简单的js交互例如侧边栏导航条以及轮播图等。</p>
								<h4>
									<span class="label label-success">css3</span>
									<span class="label label-warning">javascript</span>
									<span class="label label-user1">模块化布局</span>
									<span class="label label-user2">jsonp</span>
									<span class="label label-user3">智能搜索条</span>
									<span class="label label-user4">hover</span>
									<span class="label label-user5">智能轮播</span>
									<span class="label label-danger">侧边导航</span>
								</h4>
							</div>
						</div>
					</div>
				</a>
				<a href="http://codefine.github.io/demo/content/artical/mobile/antario" target="_blank">
					<div class="panel panel-warning">
						<div class="panel-heading">
							<h4>安踏-去打破 <span class="label label-danger">移动端</span> <span class="label label-primary">目前最得意的DEMO</span></h4>
						</div>
						<div class="panel-body flex">
							<div class="col-lg-4 col-md-4 col-sm-4 clearPadding r-padding">
								<img src="demo/img/artical/antario.jpg" alt="antario" class="img-rounded">
							</div>
							<div class="col-lg-8 col-md-8 col-sm-8 hidden-xs flex-cont">
								<p class="indent">从淘宝造物节到安踏去打破，如今这样含有丰富动画效果的移动端页面确实能快速抓住人们的眼球。</p>
								<p class="indent">本例中，以css3构建的伪圆柱模型为主体，漂浮层为辅，再配合拖拽以及陀螺仪，效果十分绚丽。</p>
								<h4>
									<span class="label label-primary">html5</span>
									<span class="label label-success">css3</span>
									<span class="label label-warning">javascript</span>
									<span class="label label-user1">keyframes</span>
									<span class="label label-user2">rem适配</span>
									<span class="label label-user3">景深适配</span>
									<span class="label label-user4">预加载</span>
									<span class="label label-user5">爆炸</span>
									<span class="label label-danger">圆柱</span>
									<span class="label label-info">全景拖拽</span>
									<span class="label label-default">陀螺仪</span>
								</h4>
							</div>
						</div>
					</div>
				</a>
				<a href="http://codefine.github.io/demo/content/artical/mobile/house" target="_blank">
					<div class="panel panel-warning">
						<div class="panel-heading">
							<h4>全景家居 <span class="label label-danger">移动端<span></h4>
						</div>
						<div class="panel-body flex">
							<div class="col-lg-4 col-md-4 col-sm-4 clearPadding r-padding">
								<img src="demo/img/artical/house.jpg" alt="antario" class="img-rounded">
							</div>
							<div class="col-lg-8 col-md-8 col-sm-8 hidden-xs flex-cont">
								<p class="indent">360度展现现代家居，如果装修公司以此作为实际效果图，相信对于装修者或者购房者来说，绝对是赏心悦目的体验。</p>
								<p class="indent">本例中，通过css3旋转和平移构建的立方体，再偏移Z轴得到内视角。配合拖拽，实现360度旋转观看室内的每个角落。</p>
								<h4>
									<span class="label label-success">css3</span>
									<span class="label label-warning">javascript</span>
									<span class="label label-info">全景拖拽</span>
									<span class="label label-user5">tween算法</span>
									<span class="label label-user4">3D硬件加速</span>
								</h4>
							</div>
						</div>
					</div>
				</a>
				<a href="http://codefine.github.io/content/demo/artical/mobile/taobao" target="_blank">
					<div class="panel panel-warning">
						<div class="panel-heading">
							<h4>淘宝首页 <span class="label label-danger">移动端<span></h4>
						</div>
						<div class="panel-body flex">
							<div class="col-lg-4 col-md-4 col-sm-4 clearPadding r-padding">
								<img src="demo/img/artical/taobao-mb.jpg" alt="antario" class="img-rounded">
							</div>
							<div class="col-lg-8 col-md-8 col-sm-8 hidden-xs flex-cont">
								<p class="indent">现在的大型电商网站都会配备移动端页面，由于本人的理解较为浅显，认为其布局与交互大同小异。但是要做就做好，所以换一种新颖的方式去实现。</p>
								<p class="indent">本例中，重点放在运用less去简化rem适配。为了对SEO友好，也采用h5新增标签。</p>
								<h4>
									<span class="label label-primary">html5</span>
									<span class="label label-success">css3</span>
									<span class="label label-warning">javascript</span>
									<span class="label label-danger">less</span>
									<span class="label label-user2">rem适配</span>
									<span class="label label-user5">轮播图</span>
									<span class="label label-user4">语义化</span>
								</h4>
							</div>
						</div>
					</div>
				</a>
			</div>
			<div class="col-lg-4 col-md-4 clearPadding right">
				<div class="panel panel-success">
					<div class="panel-heading">
						<h4>小型DEMO</h4>
					</div>
					<div class="panel-body">
						<div class="row">
							<a href="http://codefine.github.io/demo/content/practise/canvas/clock" target="_blank">
								<img src="demo/img/practise/canvas-clock.gif" alt="" class="col-lg-3 col-md-3 col-sm-3 col-xs-3" data-toggle="tooltip" data-placement="top" title="Canvas时钟"/>
							</a>
							<a href="http://codefine.github.io/demo/content/practise/canvas/pixelfont" target="_blank">
								<img src="demo/img/practise/canvas-pixelfont.gif" alt="" class="col-lg-3 col-md-3 col-sm-3 col-xs-3" data-toggle="tooltip" data-placement="top" title="Canvas像素显字"/>
							</a>
							<a href="http://codefine.github.io/demo/content/content/practise/css3/clock" target="_blank">
								<img src="demo/img/practise/css3-clock.gif" alt="" class="col-lg-3 col-md-3 col-sm-3 col-xs-3" data-toggle="tooltip" data-placement="top" title="CSS3时钟"/>
							</a>
							<a href="http://codefine.github.io/demo/content/practise/css3/listfold" target="_blank">
								<img src="demo/img/practise/css3-listfold.gif" alt="" class="col-lg-3 col-md-3 col-sm-3 col-xs-3" data-toggle="tooltip" data-placement="top" title="CSS3折纸列表"/>
							</a>
						</div>
						<div class="row">
							<a href="http://codefine.github.io/demo/content/practise/css3/navfan" target="_blank">
								<img src="demo/img/practise/css3-navfan.gif" alt="" class="col-lg-3 col-md-3 col-sm-3 col-xs-3" data-toggle="tooltip" data-placement="top" title="CSS3扇形导航"/>
							</a>
							<a href="http://codefine.github.io/demo/content/practise/css3/tabcube" target="_blank">
								<img src="demo/img/practise/css3-tabcube.gif" alt="" class="col-lg-3 col-md-3 col-sm-3 col-xs-3" data-toggle="tooltip" data-placement="top" title="CSS3立方体轮播图"/>
							</a>
							<a href="http://codefine.github.io/demo/content/practise/css3/tabrotate" target="_blank">
								<img src="demo/img/practise/css3-tabrotate.gif" alt="" class="col-lg-3 col-md-3 col-sm-3 col-xs-3" data-toggle="tooltip" data-placement="top" title="CSS3旋转轮播图"/>
							</a>
							<a href="http://codefine.github.io/demo/content/practise/jq/accordion" target="_blank">
								<img src="demo/img/practise/jq-accordion.gif" alt="" class="col-lg-3 col-md-3 col-sm-3 col-xs-3" data-toggle="tooltip" data-placement="top" title="JQ手风琴效果"/>
							</a>
						</div>
						<div class="row">
							<a href="http://codefine.github.io/demo/content/practise/jq/dragtogrid" target="_blank">
								<img src="demo/img/practise/jq-dragtogrid.gif" alt="" class="col-lg-3 col-md-3 col-sm-3 col-xs-3" data-toggle="tooltip" data-placement="top" title="JQ拖拽到网格"/>
							</a>
							<a href="http://codefine.github.io/demo/content/practise/jq/magnifying" target="_blank">
								<img src="demo/img/practise/jq-magnifying.gif" alt="" class="col-lg-3 col-md-3 col-sm-3 col-xs-3" data-toggle="tooltip" data-placement="top" title="JQ放大镜效果"/>
							</a>
							<a href="http://codefine.github.io/demo/content/practise/jq/tabfocus" target="_blank">
								<img src="demo/img/practise/jq-tabfocus.gif" alt="" class="col-lg-3 col-md-3 col-sm-3 col-xs-3" data-toggle="tooltip" data-placement="top" title="JQ焦点轮播图"/>
							</a>
							<a href="http://codefine.github.io/demo/content/practise/jq/massage" target="_blank">
								<img src="demo/img/practise/jq-massage.gif" alt="" class="col-lg-3 col-md-3 col-sm-3 col-xs-3" data-toggle="tooltip" data-placement="top" title="JQ模拟短消息"/>
							</a>
							
						</div>
						<div class="row">
							<a href="http://codefine.github.io/demo/content/practise/js/delaynav" target="_blank">
								<img src="demo/img/practise/js-delaynav.gif" alt="" class="col-lg-3 col-md-3 col-sm-3 col-xs-3" data-toggle="tooltip" data-placement="top" title="JS延迟导航"/>
							</a>
							<a href="http://codefine.github.io/demo/content/practise/js/dommodify" target="_blank">
								<img src="demo/img/practise/js-dommodify.gif" alt="" class="col-lg-3 col-md-3 col-sm-3 col-xs-3" data-toggle="tooltip" data-placement="top" title="JS-DOM修改保存"/>
							</a>
							<a href="http://codefine.github.io/demo/content/practise/js/dragback" target="_blank">
								<img src="demo/img/practise/js-dragback.gif" alt="" class="col-lg-3 col-md-3 col-sm-3 col-xs-3" data-toggle="tooltip" data-placement="top" title="JS拖拽回放"/>
							</a>
							<a href="http://codefine.github.io/demo/content/practise/js/duty" target="_blank">
								<img src="demo/img/practise/js-duty.gif" alt="" class="col-lg-3 col-md-3 col-sm-3 col-xs-3" data-toggle="tooltip" data-placement="top" title="JS职位信息"/>
							</a>
						</div>
						<div class="row">
							<a href="http://codefine.github.io/demo/content/practise/js/list" target="_blank">
								<img src="demo/img/practise/js-list.gif" alt="" class="col-lg-3 col-md-3 col-sm-3 col-xs-3" data-toggle="tooltip" data-placement="top" title="JS简易列表"/>
							</a>
							<a href="http://codefine.github.io/demo/content/practise/js/priceCount" target="_blank">
								<img src="demo/img/practise/js-priceCount.gif" alt="" class="col-lg-3 col-md-3 col-sm-3 col-xs-3" data-toggle="tooltip" data-placement="top" title="JS价格计算"/>
							</a>
							<a href="http://codefine.github.io/demo/content/practise/js/qqgame" target="_blank">
								<img src="demo/img/practise/js-qqgame.gif" alt="" class="col-lg-3 col-md-3 col-sm-3 col-xs-3" data-toggle="tooltip" data-placement="top" title="JS-QQ表情小游戏"/>
							</a>
							<a href="http://codefine.github.io/demo/content/practise/js/scroll" target="_blank">
								<img src="demo/img/practise/js-scroll.gif" alt="" class="col-lg-3 col-md-3 col-sm-3 col-xs-3" data-toggle="tooltip" data-placement="top" title="JS滚动条"/>
							</a>
						</div>
						<div class="row">
							<a href="http://codefine.github.io/demo/content/practise/js/scrollbar" target="_blank">
								<img src="demo/img/practise/js-scrollbar.gif" alt="" class="col-lg-3 col-md-3 col-sm-3 col-xs-3" data-toggle="tooltip" data-placement="top" title="JS智能滚动条"/>
							</a>
							<a href="http://codefine.github.io/demo/content/practise/js/selectall" target="_blank">
								<img src="demo/img/practise/js-selectall.gif" alt="" class="col-lg-3 col-md-3 col-sm-3 col-xs-3" data-toggle="tooltip" data-placement="top" title="JS全选"/>
							</a>
							<a href="http://codefine.github.io/demo/content/practise/js/shopping" target="_blank">
								<img src="demo/img/practise/js-shopping.gif" alt="" class="col-lg-3 col-md-3 col-sm-3 col-xs-3" data-toggle="tooltip" data-placement="top" title="JS抢购倒计时"/>
							</a>
							<a href="http://codefine.github.io/demo/content/practise/js/stargrade" target="_blank">
								<img src="demo/img/practise/js-stargrade.gif" alt="" class="col-lg-3 col-md-3 col-sm-3 col-xs-3" data-toggle="tooltip" data-placement="top" title="JS星级评分"/>
							</a>
						</div>
						<div class="row">
							<a href="http://codefine.github.io/demo/content/practise/js/tabauto" target="_blank">
								<img src="demo/img/practise/js-tabauto.gif" alt="" class="col-lg-3 col-md-3 col-sm-3 col-xs-3" data-toggle="tooltip" data-placement="top" title="JS轮播选项卡"/>
							</a>
							<a href="http://codefine.github.io/demo/content/practise/js/tabauto2" target="_blank">
								<img src="demo/img/practise/js-tabauto2.gif" alt="" class="col-lg-3 col-md-3 col-sm-3 col-xs-3" data-toggle="tooltip" data-placement="top" title="JS自动轮播图"/>
							</a>
							<a href="http://codefine.github.io/demo/content/practise/js/tabstage2" target="_blank">
								<img src="demo/img/practise/js-tabstage2.gif" alt="" class="col-lg-3 col-md-3 col-sm-3 col-xs-3" data-toggle="tooltip" data-placement="top" title="JS二级选项卡"/>
							</a>
							<a href="http://codefine.github.io/demo/content/practise/js/textmove" target="_blank">
								<img src="demo/img/practise/js-textmove.gif" alt="" class="col-lg-3 col-md-3 col-sm-3 col-xs-3" data-toggle="tooltip" data-placement="top" title="JS文字搬家"/>
							</a>
						</div>
						<div class="row">
							<a href="http://codefine.github.io/demo/content/practise/js/textoperation" target="_blank">
								<img src="demo/img/practise/js-textoperation.gif" alt="" class="col-lg-3 col-md-3 col-sm-3 col-xs-3" data-toggle="tooltip" data-placement="top" title="JS查找高亮替换"/>
							</a>
							<a href="http://codefine.github.io/demo/content/practise/js/thumbnailtab" target="_blank">
								<img src="demo/img/practise/js-thumbnailtab.gif" alt="" class="col-lg-3 col-md-3 col-sm-3 col-xs-3" data-toggle="tooltip" data-placement="top" title="JS缩略图轮播图"/>
							</a>
							<a href="http://codefine.github.io/demo/content/practise/js/bannerrandom" target="_blank">
								<img src="demo/img/practise/js-bannerrandom.gif" alt="" class="col-lg-3 col-md-3 col-sm-3 col-xs-3" data-toggle="tooltip" data-placement="top" title="JS随机广告"/>
							</a>
							<a href="http://codefine.github.io/demo/content/practise/mobile/scroll" target="_blank">
								<img src="demo/img/practise/mobile-scroll.gif" alt="" class="col-lg-3 col-md-3 col-sm-3 col-xs-3" data-toggle="tooltip" data-placement="top" title="移动端-滚动条"/>
							</a>
						</div>
					</div>
					<div class="panel-footer">
						<blockquote>
  							<p>Twenty-eight years and my life is still. Trying to get up that great big hill of hope. For a destination.</p>
  						<footer><cite title="Source Title">What's up</cite>-4 Non Blondes</footer>
</blockquote>
						<hr>
						<p class="indent">
							<strong>本网站用Bootstrap搭建，用时不到1天，配色较为简单，旨在陈列我自学期间的一点点积累。</strong>
						</p>
						<p class="indent">
							<strong>时光荏苒，转眼半年过去了。从最初的html和css奋笔疾书到现在js渐入佳境，虽坎坎坷坷，但一步一个脚印，从未停下脚步。</strong>
						</p>
						<p class="indent">
							<strong>整个学习过程几乎是加速状态，这全都得益于那些看得见和看不见的良师益友，在此特别感谢期间为我答疑解惑的前辈和群友们。</strong>
						</p>
						<p class="indent">
							<strong>我相信这是一个可以通过百倍努力就能自由遨游的时代，而互联网行业就是我的星辰大海。</strong>
						</p>
						<hr>
						<address>
							<strong>卢敬陶</strong><br>
							<strong>Michael.Lu</strong><br>
							<a href="mailto:277133779@qq.com">277133779@qq.com</a>
						</address>
					</div>
				</div>
			</div>
		</div>
		<script src="demo/js/data.js"></script>
		<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
		<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
		<script src="js/main.js"></script>
	</body>
</html>
